import { memo } from 'react'
import { useNavigate } from 'react-router-dom'
import { Card, Dropdown, Image } from 'antd'
import { VerticalAlignTopOutlined, CarOutlined, EllipsisOutlined } from '@ant-design/icons'
import { MapDefine } from '@renderer/define'

export interface Props {
  dataSource: MapDefine
}
function PreviewCard({ dataSource }: Props) {
  const { url, mapname } = dataSource
  const navigate = useNavigate()

  const stickAction = () => {
    console.log('Clicked!')
  }

  const navigationAction = () => {
    navigate('/navigation', { replace: false })
  }

  const items: MenuProps['items'] = [
    {
      key: '1',
      label: 'Submit and continue'
    }
  ]

  return (
    <Card
      className="preview-card "
      cover={
        url ? (
          <Image
            className="rounded-t-lg object-cover"
            height={280}
            src={url}
            preview={false}
            fallback=""
          />
        ) : null
      }
      actions={[
        <VerticalAlignTopOutlined key="setting" onClick={stickAction} />,
        <CarOutlined key="edit" onClick={navigationAction} />,
        <Dropdown menu={{ items }}>
          <EllipsisOutlined />
        </Dropdown>
      ]}
    >
      <div className="absolute left-0 top-0 right-0 p-3 rounded-t-lg bg-black/50 text-white">
        <div className="text-xl leading-none">{mapname}</div>
      </div>
    </Card>
  )
}

export default memo(PreviewCard)
